<template>
  <div>
    <a-form :form="form" class="form">
      <a-card :bordered="false" title="公司信息" :loading="loading1">
        <a-row class="form-row">
          <a-col :lg="{ span: 7 }" :sm="24">
            <a-form-item label="公司名称">
              <a-input
                type="textarea"
                placeholder="请输入公司名称"
                v-decorator="[
                  'company_name',
                  {
                    rules: [{ max: 255, message: '不得超过255个字符' }],
                    initialValue:formData.company_name
                  },
                ]"
              />
            </a-form-item>
          </a-col>

          <a-col :lg="{ span: 7, offset: 1 }" :sm="24">
            <a-form-item label="公司电话">
              <a-input
                type="textarea"
                placeholder="请输入公司电话"
                v-decorator="[
                  'company_telphone',
                  {
                    rules: [{ max: 255, message: '不得超过255个字符' },
                            { validator:checkPhone}
                    ],
                    initialValue:formData.company_telphone
                  },
                ]"
              />
            </a-form-item>
          </a-col>

          <a-col :lg="{ span: 7, offset: 1 }" :sm="24">
            <a-form-item label="公司描述">
              <a-input
                type="textarea"
                placeholder="请输入公司描述"
                :rows="6"
                v-decorator="['company_describe', { initialValue:formData.company_describe}]"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-card>

      <a-card
        class="card"
        :title="'公司头像'"
        :bordered="false"
         :loading="loading1"
        style="margin-top: 20px"
      >
        <a-col :lg="{ span: 7 }" :sm="24">
          <oneImage ref="oneImage" :path="'company'" :imageUrl="formData.cover_image?imageUrl(formData.cover_image):undefined"/>
        </a-col>
      </a-card>

      <a-card
        class="card"
        :title="'轮播图'"
        :bordered="false"
         :loading="loading1"
        style="margin-top: 20px"
      >
        <manyImage ref="manyImage" :path="'company'" :imagesArray="formData.many_image?formData.many_image.split(','):[]"/>
      </a-card>
      <a-card
        class="card"
        :title="'位置信息'"
        :bordered="false"
        style="margin-top: 20px"
         :loading="loading1"
      >
        <a-row class="form-row">
          <a-col :lg="{ span: 7 }" :sm="24">
            <a-form-item label="经度">
              <a-input
                placeholder="请点击地图"
                disabled
                v-decorator="[
                  'longitude',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请点击地图',
                      },
                    ],
                  },
                ]"
              />
            </a-form-item>
          </a-col>

          <a-col :lg="{ span: 7, offset: 1 }" :sm="24">
            <a-form-item label="纬度">
              <a-input
                placeholder="请点击地图"
                disabled
                v-decorator="[
                  'latitude',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请点击地图',
                      },
                    ],
                  },
                ]"
              />
            </a-form-item>
          </a-col>

          <a-col :lg="{ span: 7, offset: 1 }" :sm="24">
            <a-form-item label="详细地址(点击地图)">
              <a-input
                type="textarea"
                placeholder="请输入详细地址"
                v-decorator="[
                  'address',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请输入详细地址',
                      },
                      { max: 255, message: '不得超过255个字符' },
                    ],
                    initialValue:formData.address
                  },
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
         <template v-if="!loading1">
        <Map @spot="getMap" @getAddress="getAddress" :lngDefault="parseFloat(formData.longitude)" :latDefault="parseFloat(formData.latitude)"></Map>
        </template>
      </a-card>
      <footer-tool-bar style="z-index: 8">
        <a-button type="primary" @click="validate" :loading="loading2"
          >提交</a-button
        >
      </footer-tool-bar>
    </a-form>
  </div>
</template>

<script>
import FooterToolBar from "@/components/tool/FooterToolBar";
import Map from "@/components/map";
// import { areaSelList } from "@/services/area";
import FormEdit from "@/components/form/FormEdit";
import oneImage from "@/components/uploadImages/oneImage";
import manyImage from "@/components/uploadImages/manyImage";
import {settingSelOne,settingsEdit} from "@/services/findShopSetting"
import {uploadOneFile,manyFile} from "@/services/upload"
export default {
  name: "AdminAdd",
  //   i18n: require('../i18n'),
  components: {
    // CollectionCreateForm: CollectionCreateForm,
    FooterToolBar,
    Map,
    FormEdit,
    oneImage,
    manyImage,
  },
  data() {
    return {
      form: this.$form.createForm(this),
      formData:{},
      loading2: false,
      loading3: false,
      loading1: false,
    };
  },
  async created() {
      this.settingSelOneLoad()
  },
  watch: {
  },
  methods: {
    handleChange(e) {
    //   for (let i = 0; i < this.areaListSelList.length; i++) {
    //     if (this.areaListSelList[i].id == e) {
    //       this.areaCommunity = this.areaListSelList[i]["child"];
    //     }
    //   }
    //   this.form.setFieldsValue({ community_id: undefined });
    },
     async settingSelOneLoad(){
        this.loading1 = true
        let res =   await settingSelOne()
        if(res.code == 200){
            this.formData = res.data
        }
         this.loading1 = false
    },
    getMap(obj) {
      this.form.setFieldsValue(obj);
    },
    getAddress(e) {
      this.form.setFieldsValue(e);
    },
    async validate() {
      const { form, $message, $router, $refs } = this;
      const this_ = this;
      form.validateFields((err) => {
        if (err) {
          $message.error("信息填写有误");
          return;
        } else {
          this.$confirm({
            title: "确定要编辑吗?",
            async onOk() {
              this_.loading2 = true;
              let formData = form.getFieldsValue();

              let oneImage = $refs.oneImage.getFile(); //封面图片

              if (oneImage.has("file")) {
                if (!oneImage.get("file")) {
                  formData["cover_image"] = "";
                } else {
                  let fileRes = await uploadOneFile(oneImage);
                  if (fileRes.code == 200) {
                    formData["cover_image"] = fileRes.data.url;
                  } else {
                    $message.error("封面图片上传失败");
                    return;
                  }
                }
              }
              let manyImage = $refs.manyImage.getFile(); //多图
              formData["many_image"] = manyImage.oldImageStr
              if (manyImage.formDataImg) {
                let fileRes = await manyFile(manyImage.formDataImg);
                if (fileRes.code == 200) {
                  formData["many_image"] +=  (formData["many_image"]?',':'')+fileRes.data;
                } else {
                  $message.error("轮播图上传失败");
                  return;
                }
              } 

              let res = await settingsEdit({ formData });
              if (res.code == 200) {
                $message.success(res.message);
                // this_.closeTabs.$emit("closeTabs");
                // $router.push("/findShop/officeBuildings/buildingList");
              }

              this_.loading2 = false;
            },
          });
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.aSelect {
  display: flex;
  width: 100%;
  justify-content: space-between;
  /* border: 1px solid red; */
  align-items: center;
}

.card {
  margin-bottom: 24px;
}

.form {
  .form-row {
    margin: 0 -8px;
    // display: flex;
    // justify-content: space-between;
    //    display: flex;
    // justify-content: space-between;
  }
  .ant-col-md-12,
  .ant-col-sm-24,
  .ant-col-lg-6,
  .ant-col-lg-8,
  .ant-col-lg-10,
  .ant-col-xl-8,
  .ant-col-xl-6 {
    padding: 0 8px;
  }
}
.topRow button {
  margin-top: 5px;
  margin-left: 10px;
}

.portraitImage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  //   border: 1px solid red;
}

#portraitImage {
  //   width: 100%;
  //   height: 100%;
}

.portraitShow {
  width: 70%;
  height: 0;
  padding-bottom: 70%;
  border: 1px dashed #ced0d3;
  // margin-left: 20px;
  position: relative;
  margin: auto;
  // display: flex;
  // justify-content: center;
  // align-items: center;
  cursor: pointer;
}
.plus-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 20px;
  transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
}
</style>
